<script setup lang="ts">
import {ref} from 'vue';
import {useRouter} from "vue-router";

const router = useRouter();
// import {showToast} from 'vant';
// import {useRouter} from "vue-router";

//编写标签分类


// const router = useRouter();

// //可关闭标签
// const show = ref(true);
// const close = () => {
//   show.value = false;
// };

// 搜索槽
const searchText = ref('');
//标签列表
const originTagList = [
  {
    text: '性别',
    children: [
      {text: '男', id: '男'},
      {text: '女', id: '女'},
      {text: '待更新(联系宇怜)', id: '待更新(联系宇怜)', disabled: true},
    ],
  },
  {
    text: '年级',
    children: [
      {text: '大一', id: '大一'},
      {text: '大二', id: '大二'},
      {text: '大三', id: '大三'},
      {text: '待更新(联系宇怜)', id: '待更新(联系宇怜)', disabled: true},
    ],
  },
  {
    text: '编程语言',
    children: [
      {text: 'Java', id: 'Java'},
      {text: 'TypeScript', id: 'TypeScript'},
      {text: 'Python', id: 'Python'},
      {text: '待更新(联系宇怜)', id: '待更新(联系宇怜)', disabled: true},
    ],
  },
  {
    text: '目标',
    children: [
      {text: '读博', id: '读博'},
      {text: '考研', id: '考研'},
      {text: '考公', id: '考公'},
      {text: '脱单', id: '脱单'},
      {text: '房贷', id: '房贷'},
      {text: '躺平', id: '躺平'},
      {text: '竞赛', id: '竞赛'},
      {text: 'Google的校招', id: 'Google的校招'},
      {text: '华为认证', id: '华为认证'},
      {text: '待更新(联系宇怜)', id: '待更新(联系宇怜)', disabled: true},
    ],
  },
];
// 封装成响应式对象， 默认为原始数组 ( 防止过滤原始数组 )
let tagList = ref(originTagList);
//点击搜索后触发的事件
const onSearch = () => {
  // 使用filter从标签列表中进行过滤，取出每个标签列表的children
  // parentTag是父级标签 ( { text ··· children ···} )
  // 取出指定的父标签中所有的parentTag.children标签
  // 将children数组中的每一项都取出，并拼接成一个完整的大数组
  // console.log(items.flatMap(parentTag => parentTag.children))
  // contains方法用来表述text是否包含了searchText的值，包含就保留，否则就过滤
  // map返回的就是新数组
  tagList.value = originTagList.map(parentTag => {
    //保证原始数据 parentTag.children 和 parentTag 不被改变
    //es6语法，将数组内的元素取出来放到新的数组里
    const tempChildren = [...parentTag.children];
    const tempParentTag = {...parentTag};
    tempParentTag.children = tempChildren.filter(item => item.text.includes(searchText.value));
    return tempParentTag;
  })
};
//点击取消后触发的事件
const onCancel = () => {
  searchText.value = ''; // 清空搜索词
  tagList.value = originTagList;
};

//已选中的标签
// const activeIds = ref(1); //单选模式
const activeIds = ref([]); //多选模式
const activeIndex = ref(0);

//添加移除标签的点击事件
const doClose = (tag) => {
  // 使用 filter 函数过滤器
  // 如果要删除的标签 tag 不是 标签列表item ，则保留 ( 只删掉点击了事件的标签 )
  activeIds.value = activeIds.value.filter(item => {
    return item !== tag;
  });
}

// 编写跳转到搜索页面的事件
// 使用 router.push 的方式去往当前的路由栈中去压入一个新的界面的地址
// 网页就会导航到新的路由地址
const doSearchResult = () => {
  router.push({
    // 给搜索结果页指定的路径
    path: '/user/list',
    // 键值对，tags是用户要搜索的标签
    query: {
      tags: activeIds.value
    }
  })
}
</script>

<template>
  <!--  搜索页-->
  <form action="/">
    <!--    @search表示点击搜索触发的事件，@cancel表示点击取消触发的事件-->
    <van-search
        v-model="searchText"
        show-action
        placeholder="请输入要搜索的标签"
        @search="onSearch"
        @cancel="onCancel"
    />
  </form>

  <van-divider content-position="left">已选标签</van-divider>
  <div v-if="activeIds.length === 0">请选择标签</div>
  <!-- 两端对齐 -->
  <van-row gutter="20" style="padding: 0 16px">
    <van-col v-for="tag in activeIds">
      <van-tag closeable size="large" type="primary" @close="doClose(tag)">
        {{ tag }}
      </van-tag>
    </van-col>
  </van-row>

  <van-divider content-position="left">选择标签</van-divider>

  <!--  标签分类选择-->
  <van-tree-select
      v-model:active-id="activeIds"
      v-model:main-active-index="activeIndex"
      :items="tagList"
  />

  <!--  绑定一个事件，当用户点击搜索后，跳转到搜索页面-->
  <div style="padding: 16px">
    <van-button block type="primary" @click="doSearchResult">搜索</van-button>
  </div>
</template>

<style scoped>

</style>